<template>
  <div class="sentiment-page">
    <div class="sentiment-page-header">
      <top-header :disease="condition.diseaseName" />
    </div>
    <div class="sentiment-page-condition">
      <condition @change="conditionChange" />
    </div>
    <div class="sentiment-page-migrate">
      <div class="sentiment-page-migrate-ranking">
        <ranking :condition="condition" />
      </div>
      <div class="sentiment-page-migrate-map">
        <sentiment-map :condition="condition" />
      </div>
    </div>
    <div class="sentiment-page-heatmap">
      <el-card class="box-card" shadow="hover" style="border: none">
        <div slot="header" class="clearfix card-header">
          <svg-icon icon-class="heatmap" class="card-header-icon"></svg-icon>
          <span>风险热力图</span>
        </div>
        <div class="card-content">
          <heatmap :condition="condition" />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import TopHeader from "./topheader/index.vue";
import Condition from "./condition/index.vue";
import SentimentMap from "./smap/index.vue";
import Ranking from "./ranking/index.vue";
import Heatmap from "./heatmap/index.vue";
import dayjs from "dayjs";

export default {
  name: "SentimentPage",
  components: { TopHeader, SentimentMap, Ranking, Heatmap, Condition },
  props: {},
  computed: {},
  data() {
    return {
      condition: {
        disease: "",
        diseaseName: "猴痘",
        country: { code: "CN", name: "中国" },
        from: { code: null, name: "全球" },
        date: dayjs().toString("YYYY-MM-DD"),
      },
    };
  },
  methods: {
    conditionChange(e) {
      console.log(e);
      this.condition = e;
    },
  },
};
</script>
<style lang="scss">
$--color-primary: #2e57e5;

.sentiment-page {
  width: calc(100% - 200px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 12px;
  // overflow-y: auto;
  background: #f7f9fc;

  &-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: 40px;
  }
  &-condition {
    width: 100%;
  }
  &-migrate {
    display: flex;
    flex-direction: row;
    // gap: 24px;
    width: 100%;

    &-ranking {
      // padding: 24px;
      width: 320px;
      // height: 521px;
      // min-height: 360px;
      // flex: 1;
      /* N9 */
      background: #ffffff;
      border-radius: 8px;
    }
    &-map {
      flex: 1;
      // height: 500px;
      min-width: 1080px;
      height: 550px;
    }
  }
  &-heatmap {
    width: 100%;
    // height: 527px;

    /* N9 */
    // background: #ffffff;

    // box-shadow: 0px 0px 1px rgba(31, 38, 76, 0.32),
    //     0px 2px 5px rgba(31, 38, 76, 0.04),
    //     0px 2px 3px -2px rgba(31, 38, 76, 0.1);
    // border-radius: 8px;

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both;
    }
    .box-card .el-card__header {
      padding: 18px 20px 0 20px;
      border-bottom: none;
    }
    .card-header {
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 600;
      font-size: 16px;
      line-height: 22px;

      /* N1 */
      color: #1f264d;

      &-icon {
        font-size: 42px;
      }
    }
  }
}

*:focus-visible {
  outline: unset;
}

.info-chart {
  width: 80px;
  height: 30px;
}

.map-label {
  font-size: 12px;
  color: #9c9c9c;
  pointer-events: none;
}

.leaflet-map-pane svg {
  z-index: 100000;
}

.form-inline {
  width: 100%;
  // &.label-top {
  //     display: flex;
  //     flex-direction: row;
  //     align-items: center;
  // }
  // &.label-left {
  //     display: flex;
  //     flex-direction: column;
  //     align-items: center;
  // }
  &.el-form--inline {
    .el-form-item {
      flex: 1;
      .el-form-item__label {
        height: 30px;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 30px;
        color: #596080;
        // margin-bottom: 8px;
      }
      .el-form-item__content {
        line-height: 30px;
        .el-date-editor--date .el-input__inner {
          padding-left: 30px;
        }
      }
      .el-input__inner {
        height: 32px;
        line-height: 28px;
        font-size: 14px;
        border-radius: 2px;

        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        padding: 0 8px;
        display: inline-block;
      }

      .el-date-editor .el-range-separator {
        line-height: 28px;
      }
      .el-date-editor--daterange.el-input__inner {
        width: 300px;
      }
    }
  }
  .el-input__suffix,
  .el-input__suffix-inner,
  .el-input__icon {
    line-height: 30px;
    height: auto;
  }
  button {
    padding: 0px 8px;
    margin: 0 10px;
    margin-bottom: 0;
    height: 32px;
    border-radius: 2px;
  }
}

.tip-widget {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
</style>
